<template>
    <div ref="mainContainer" class="mainContainer">
        <div ref="viewerContainer" class="viewer">
            <vc-viewer @ready="ready">
                <vc-layer-imagery :rectangle="rect">
                    <vc-provider-imagery-tianditu
                        token="e7894a985fe457b58ef9c65beae0619a"
                        mapStyle="img_c"
                    ></vc-provider-imagery-tianditu>
                </vc-layer-imagery>
                <vc-provider-terrain-cesium ref="terrain"></vc-provider-terrain-cesium>
            </vc-viewer>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            rect: null,
        }
    },
    methods: {
        ready(cesiumInstance) {
            const { Cesium, viewer } = cesiumInstance
            let target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116)
            let offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162)
            viewer.camera.lookAt(target, offset)
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
            this.rec = Cesium.Rectangle.fromDegrees(65, 0, 140, 60)
        }
    }
}
</script>
<style lang="stylus" scoped>
.mainContainer
    position: relative
    width: 100%
    height: 100%
    margin: 0
    border-width: 0
    padding: 0

    .viewer
        z-index: 0
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0
</style>
